<template>
  <div>
    <!-- 搜索 -->
    <div v-auth="'查'" class="head">
      <el-input
        v-model="queryParam.nodeId"
        size="small"
        prefix-icon="el-icon-search"
        placeholder="请输入节点id"
      ></el-input>
      <el-select
        v-model="queryParam.parentId"
        size="small"
        prefix-icon="el-icon-search"
        placeholder="请选择父节点"
      >
        <el-option
          v-for="item in secondNodeList"
          :key="item.nodeId"
          :label="item.nodeName"
          :value="item.nodeId"
        ></el-option>
      </el-select>
      <el-input
        v-model="queryParam.relationship"
        size="small"
        prefix-icon="el-icon-search"
        placeholder="请输入关系"
      ></el-input>
      <el-input
        v-model="queryParam.nodeName"
        size="small"
        prefix-icon="el-icon-search"
        placeholder="请输入节点名"
      ></el-input>
      <el-input
        v-model="queryParam.nodeLabel"
        size="small"
        prefix-icon="el-icon-search"
        placeholder="请输入节点类型"
      ></el-input>
      <el-input
        v-model="queryParam.nodeContent"
        size="small"
        prefix-icon="el-icon-search"
        placeholder="请输入节点描述"
      ></el-input>
    </div>
    <!-- 按钮 -->
    <div class="button">
      <el-button
        type="primary"
        v-auth="'查'"
        size="mini"
        plain
        icon="el-icon-search"
        @click="getList"
      >搜索</el-button>
      <el-button v-auth="'查'" size="mini" plain icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      <el-button
        type="success"
        v-auth="'增'"
        size="mini"
        plain
        @click="handleShowAddEdit"
        icon="el-icon-plus"
      >新增三级节点</el-button>
      <!-- <e-upload size="mini" v-auth="'导入'" url="/thirdNode/thirdnode/upload" @success="getList">导入数据</e-upload>
      <el-button
        type="warning"
        v-auth="'导出'"
        icon="el-icon-download"
        plain
        size="mini"
        @click="handleExport"
      >导出数据</el-button> -->
      <el-button
        v-auth="'删'"
        type="danger"
        size="small"
        :disabled="multipleSelection.length == 0"
        @click="handleDeleteMany"
      >批量删除</el-button>
    </div>

    <!-- 表格 -->
    <el-table
      :data="dataList"
      style="width: 100%"
      :header-cell-style="{background:'#eef1f6'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <!-- <el-table-column align="center" type="index"></el-table-column> -->
      <el-table-column prop="nodeId" label="节点id" align="center"></el-table-column>
      <el-table-column prop="secondNodeName" label="父节点" align="center"></el-table-column>
      <el-table-column prop="relationship" label="关系" align="center"></el-table-column>
      <el-table-column prop="nodeName" label="节点名" align="center"></el-table-column>
      <el-table-column prop="nodeLabel" label="节点类型" align="center"></el-table-column>
      <el-table-column prop="nodeContent" label="节点描述" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="140" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-auth="'改'"
            type="text"
            size="mini"
            icon="el-icon-edit"
            @click="handleShowUpdateEdit(scope.row)"
          >编辑</el-button>
          <el-button
            v-auth="'删'"
            type="text"
            size="mini"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 批量删除 -->
    <!-- <el-button
      style="margin-top: 8px"
      v-auth="'删'"
      type="danger"
      size="small"
      :disabled="multipleSelection.length == 0"
      @click="handleDeleteMany"
    >批量删除</el-button> -->
    <!-- 分页 -->
    <el-pagination
      background
      style="display:flex;justify-content:center;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="queryParam.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      :destroy-on-close="true"
      @close="reset"
      :close-on-click-modal="false"
      width="600px"
    >
      <el-form ref="form" :model="form" label-width="auto" style="margin:20px" :rules="rules">
        <!-- <el-form-item label="节点id" prop="nodeId">
          <el-input v-model="form.nodeId" placeholder="请输入节点id" />
        </el-form-item> -->
        <el-form-item label="父节点" prop="parentId">
          <el-select v-model="form.parentId" placeholder="请选择父节点" :disabled="editFlag">
            <el-option
              v-for="item in secondNodeList"
              :key="item.nodeId"
              :label="item.nodeName"
              :value="item.nodeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关系" prop="relationship">
          <el-input v-model="form.relationship" placeholder="请输入关系" :disabled="editFlag"/>
        </el-form-item>
        <el-form-item label="节点类型" prop="nodeLabel">
          <el-input v-model="form.nodeLabel" placeholder="请输入节点类型" :disabled="editFlag"/>
        </el-form-item>
        <el-form-item label="节点名" prop="nodeName">
          <el-input v-model="form.nodeName" placeholder="请输入节点名" />
        </el-form-item>
        <el-form-item label="节点描述" prop="nodeContent">
          <el-input
            v-model="form.nodeContent"
            type="textarea"
            :autosize="{ minRows: 2 }"
            placeholder="请输入节点描述"
          />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="medium" @click="dialogVisible = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="handleAddOrUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import page from "@/mixin/page.js";
export default {
  mixins: [page],
  components: {},
  props: {},
  data() {
    return {
      // 多选框数据
      multipleSelection: [],
      dialogVisible: false,
      editFlag: false,
      dialogTitle: "",

      dataList: [],
      secondNodeList: [],
      form: {
        thirdId: null,
        nodeId: null,
        parentId: null,
        relationship: null,
        nodeName: null,
        nodeLabel: null,
        nodeContent: null
      },
      queryParam: {
        thirdId: null,
        nodeId: null,
        parentId: null,
        relationship: null,
        nodeName: null,
        nodeLabel: null,
        nodeContent: null
      },
      rules: {
        // nodeId: [
        //   { required: true, message: "请输入节点id", trigger: "change" }
        // ],
        parentId: [
          { required: true, message: "请选择父节点", trigger: "change" }
        ],
        relationship: [
          { required: true, message: "请输入关系", trigger: "change" }
        ],
        nodeName: [
          { required: true, message: "请输入节点名", trigger: "change" }
        ],
        nodeLabel: [
          { required: true, message: "请输入节点类型", trigger: "change" },
          {
            pattern: /[a-zA-z]$/,
            message: "节点类型只能使用英文",
            trigger: "change"
          }
        ],
        nodeContent: [
          { required: true, message: "请输入节点描述", trigger: "change" }
        ]
      }
    };
  },
  mounted() {
    this.getList();
    this.getSecondNodeList();
  },
  methods: {
    reset() {
      this.form = this.$options.data().form;
    },
    resetQuery() {
      this.queryParam = this.$options.data().queryParam;
    },
    handleExport() {
      this.download("/thirdNode/thirdnode/export", this.queryParam);
    },
    // 多选框回调
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => item.nodeId);
    },
    handleShowAddEdit() {
      this.dialogTitle = "添加";
      this.dialogVisible = true;
      this.editFlag = false;
    },
    handleShowUpdateEdit(row) {
      this.dialogTitle = "修改";
      Object.assign(this.form, row);
      this.dialogVisible = true;
      this.editFlag = true;
    },
    handleAddOrUpdate() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.thirdId) {
            this.axios
              .post("/thirdNode/thirdnode/update", this.form)
              .then(() => {
                this.getList();
                this.dialogVisible = false;
                this.editFlag = false;
              });
          } else {
            this.axios.post("/thirdNode/thirdnode/add", this.form).then(() => {
              this.getList();
              this.dialogVisible = false;
              this.editFlag = false;
            });
          }
        }
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除这条数据, 是否继续?", "提示", {
        type: "warning"
      })
        .then(() => {
          this.axios
            .post("/thirdNode/thirdnode/delete/" + row.nodeId)
            .then(() => this.getList());
        })
        .catch(e => {});
    },
    handleDeleteMany() {
      this.$confirm(
        "此操作将永久删除 [" +
          this.multipleSelection.length +
          "] 条数据, 是否继续?",
        "提示",
        { type: "warning" }
      )
        .then(() => {
          this.axios
            .post("/thirdNode/thirdnode/delete/" + this.multipleSelection)
            .then(() => this.getList());
        })
        .catch(e => {});
    },
    // 初始化数据
    getList() {
      this.axios
        .post(`/thirdNode/thirdnode/page`, this.queryParam)
        .then(data => {
          this.dataList = data.list;
          this.total = data.total - 0;
        });
    },
    // 获取二级节点
    getSecondNodeList() {
      this.axios
        .post(`/secondNode/secondnode/page`, this.queryParam)
        .then(data => {
          this.secondNodeList = data.list;
          this.total = data.total - 0;
        });
    }
  }
};
</script>
<style scoped>
.head {
  display: flex;
  flex-wrap: wrap;
}
.head .el-input {
  width: 200px !important;
}
.head * {
  margin: 0 8px 8px 0;
}
.button {
  margin: 0 0 15px 0;
  display: flex;
}
.button * {
  margin: 0 8px 0 0;
}
</style>